<template>
  <div>
    <van-nav-bar left-arrow
  @click-left="onClickLeft"  title="发布房源"/>
  <van-cell title="房源信息" class="fang"/>
  <van-cell title="小区名称" value="请输入小区名称" is-link @click="sousuo"/>
  <van-cell-group class="zu">
   <van-field v-model="value1" label="租金" placeholder="请输入租金/月" /><div class="money">￥/月</div>
   </van-cell-group>

<van-cell-group class="jian">
   <van-field v-model="value2" label="建筑面积" placeholder="请输入建筑面积" /><div class="ping">㎡</div>
   </van-cell-group>
   <van-cell title="户型" value="请选择" is-link />
<van-cell title="所在楼层" value="请选择" is-link />
  <van-cell title="朝向" value="请选择" is-link />
  <van-cell title="房屋标题"/>
  <van-field v-model="value3" placeholder="请输入标题(例如:整租 小区名 2室 5000元)" />

  <van-cell title="房屋图像" />
  <van-uploader :after-read="afterRead" />
   <van-cell title="房屋配置" />
<van-grid :column-num="5">
  <van-grid-item icon="shop-o" text="衣柜" />
  <van-grid-item icon="send-gift-o" text="洗衣机" />
  <van-grid-item icon="hot-o" text="空调" />
  <van-grid-item icon="fire-o" text="天然气" />
  <van-grid-item icon="orders-o" text="冰箱" />
  <van-grid-item icon="vip-card-o" text="暖气" />
  <van-grid-item icon="cashier-o" text="电视" />
  <van-grid-item icon="todo-list-o" text="热水器" />
  <van-grid-item icon="gem-o" text="宽带" />
  <van-grid-item icon="idcard" text="沙发" />
</van-grid>
  <van-cell title="房屋描述" />
  <van-field v-model="value4" placeholder="请输入房屋描述信息" class="piao"/>
  <div class="di">
    <van-button type="primary" class="qu" @click="quxiao">取消</van-button>
<van-button type="info" class="ti" @click="ti">提交</van-button>
  </div>

  </div>
</template>

<script>
export default {
  data () {
    return {
      value: '',
      value1: '',
      value2: '',
      value3: '',
      value4: ''
    }
  },
  methods: {
    ti () {
      this.$toast.success('提交成功了')
      this.$router.go(-1)
    },
    quxiao () {
      this.$router.go(-1)
    },
    onClickLeft () {
      this.$router.back()
    },
    afterRead (file) {
      // 此时可以自行将文件上传至服务器
      console.log(file)
    },
    sousuo () {
      this.$router.push('/sousuo')
    }
  }
}

</script>

<style>
.zu{
  display: flex;
  align-items: center;
}
.jian{
  display: flex;
  align-items: center;
}
.ping{
  width: 30px;
  color:rgb(136, 136, 151)

}
.money{
  width: 50px;
 justify-content: center;
  font-size: 16px;
  color:rgb(136, 136, 151)
}
.fang{
  color:rgb(33, 185, 122)
}
.van-cell__label{
  margin-top: 20px;
  font-size: 14px;
}
.di{
  display: flex;
}
.qu{
right: 50%;
  width: 50%;
  bottom: 0;
  position: fixed;
  background-color: #fff;
  color:rgb(33, 185, 122);

}
.ti{
left: 50%;
  width: 50%;
  bottom: 0;
  position: fixed;

}
.piao{
 margin-bottom: 100px;
}
</style>
